 <div id="alerts" class="container-fluid">
  <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)"> 
    <div class="alertMessage" ng-bind-html="alert.msg"> </div> 
  </alert>
</div>
 <div class="padding-horizontal customer event">
   <div class="alert alert-success title font-20 bold" role="alert">
     Event: {{event.eventName}}
   </div>
   <div class="padding-vertical">
     <div class="margin-left margin-top-half">
        <label>Categories:</label>
        <span ng-repeat="cat in event.categories">
          {{cat.name}}<span ng-if="!$last">,</span>
        </span>
      </div>
     <div class="margin-left margin-top-half">
        <label>Type:</label>
        <span>
          {{event.eventType}}
        </span>
      </div>
     <div class="margin-left margin-top-half">
        <label>Description:</label>
        <span>
          {{event.description}}
        </span>
      </div>
     <div class="margin-left margin-top-half">
        <label>Suitable age:</label>
        <span>
          {{event.ageFrom}}&mdash;{{event.ageTo}} yo.
        </span>
      </div>
     <div class="margin-left margin-top-half">
        <label>Contact Person:</label>
        <span>
          {{event.contactPerson}}
        </span>
      </div>
     <div class="margin-left margin-top-half">
        <label>Contact Phone:</label>
        <span>
          {{event.phoneNumber}}
        </span>
      </div>
     <div class="margin-left margin-top-half">
        <label>Contact Email:</label>
        <span>
          <a href="mailto:{{event.email}}">
          {{event.email}}
          </a>
        </span>
      </div>
     <div class="margin-left margin-top-half">
        <label>Sponsored by:</label>
        <span>
          <a ng-href="{{event.business.webSite}}">
          {{event.business.businessName}}
          </a>
        </span>
      </div>
      <div class="margin-top schedule-list" ng-if="eventScheduleList.length>0">
        <div class="panel panel-warning" ng-repeat="(scheduleIdx,schedule) in eventScheduleList">
           <div class="panel-heading bold">{{schedule.startDate|formatdate}} {{schedule.openingTime|timestamp}} &mdash; {{schedule.endDate|formatdate}} {{schedule.closingTime|timestamp}}</div>
              <ul class="list-group">
                <li class="list-group-item"  ng-repeat="(addressIdx,add) in schedule.eventAddresses" ng-if="schedule.eventAddresses.length>0">
                  <div class="bold">
                  <button class="btn btn-success btn-xs pull-right" ng-if="customer" ng-click="subscribeEvent(scheduleIdx,addressIdx,'create')">
                      <span class="glyphicon glyphicon-plus-sign"></span> Subscribe
                    </button>
                    Add:
                    <span>{{add.addressLine1}}</span>, 
                    <span ng-if="add.addressLine2">{{add.addressLine2}},</span>
                    <span>{{add.city}}</span>
                    <span>{{add.state}}</span>
                    <span>{{add.zip}}</span>
                  </div>
                  <!-- loop over the customer subscriptions for this event-->
                  <div ng-repeat="(subIdx, customerSubscribe) in subscribeList">
                    <div class="padding-top border-top margin-top" ng-if="schedule.id===customerSubscribe.eventSchedule.id&&add.id===customerSubscribe.address.id">
                    <div class="inline-block">
                      You subscribed:
                      </div><br/>
                        <div class="inline-block">
                        {{customerSubscribe.startDate|formatdate}} {{customerSubscribe.openingTime|timestamp}} &mdash; {{customerSubscribe.endDate|formatdate}} {{customerSubscribe.closingTime|timestamp}}
                      </div>
                      <div class="pull-right">
                          <button class="btn btn-info btn-xs" ng-click="subscribeEvent(subIdx,undefined,'edit')"><span class="glyphicon glyphicon-check"></span> Edit</button>
                          <button class="btn btn-danger btn-xs" ng-click="cancelSubscription(subIdx)"><span class="glyphicon glyphicon-remove-sign"></span> unsubscribe</button>
                      </div>
                    </div>
                      
                  </div>
                </li>
              </ul>
        </div>
      </div>
   </div>
 </div>
<!--
<pre ng-bind="subscribeList| json"></pre>
<pre ng-bind="eventScheduleList| json"></pre>
-->
